<template>
  <div class="main">
    <title1 tit="收藏"></title1>
    <div class="forbackground">
      <van-tabs v-model="active" line-width="50%">
        <van-tab title="房源收藏"
          ><div class="div1" v-for="(item, index) in house" :key="index">
            <img :src="imglist[item.imgUrl]" alt="" />
            <ul class="ul1">
              <li>{{ item.areaName }}</li>
              <li>{{ item.description }}</li>
              <!-- <li>{{ item.floor }}</li> -->
              <li v-if="item.floor == 0">一室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 1">两室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 2">三室两厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 3">三室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 4">四室一厅 {{ item.areaId }}</li>
              <li class="li3">整租</li>
            </ul>
            <div class="jiage" style="fontsize: 14px">{{ item.price }}/元</div>
          </div>
        </van-tab>
        <van-tab title="商品管理"
          ><div class="div1" v-for="(item, index) in house" :key="index">
            <img :src="imglist[item.imgUrl]" alt="" />
            <ul class="ul1">
              <li>{{ item.areaName }}</li>
              <li>{{ item.description }}</li>
                <li v-if="item.floor == 0">一室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 1">两室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 2">三室两厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 3">三室一厅 {{ item.areaId }}</li>
              <li v-if="item.floor == 4">四室一厅 {{ item.areaId }}</li>
              <li class="li3">整租</li>
            </ul>
            <div class="jiage" style="fontsize: 14px">{{ item.price }}/元</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
import { getHouse } from "../../../api/index.js";
export default {
  data() {
    return {
      active: 2,
      house: [],
      imglist: [
        //    动态绑定src需要用require
        require("../../../assets/image/banner1(1).png"),
        require("../../../assets/image/banner2.png"),
        require("../../../assets/image/banner3.png"),
        require("../../../assets/image/banner4.png"),
        require("../../../assets/image/banner5.png"),
        require("../../../assets/image/banner6.png"),
      ],
    };
  },
  // 创建
  created() {
    this.shoucang();
  },

  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Mine" });
    },
    // 初始化
    async shoucang() {
      let {
        data: {
          data: { result },
        },
      } = await getHouse();
      console.log(result);
      this.house = result;
    },
  },
};
</script>

<style lang="less" scoped>
// .main {
  .forbackground {
    background-color: rgb(241, 241, 241);
  }
  .div1 {
    height: 250px;
    background-color: #fff;
  margin-bottom: 20px;
    img {
      float: left;
      float: left;
      width: 290px;
      height: 196px;
      margin: 20px;
    }
    .ul1 {
      float: left;

      li {
        margin-top: 20px;
        font-size: 11px;
      }
      /deep/ .li3 {
        width: 72px;
        height: 32px;
        border: 1px solid #618698;
        text-align: center;
        border-radius: 8px;
        font-size: 11px;
      }
    }
    .jiage {
      float: right;
      margin-top: 180px;
      color: red;
    }
  }
// }
</style>